<template>
	<view class="bindPhone">
		<view class='titles'>
			<view class='titleOne'>绑定手机号</view>
			<view class='titleTwo'>绑定手机号发现更多精彩</view>
		</view>
		<view class='forms'>
			<view class='formLine dFlex jBetween_aCenter'>
				<view class='lineTitle'>手机号</view>
				<view class='lineVal dFlex jBetween_aCenter'>
					<view class='iptBox'>
						<input type="number" v-model="tel" placeholder="请输入手机号">
					</view>
				</view>
			</view>
			<view class='formLine dFlex jBetween_aCenter'>
				<view class='lineTitle'>验证码</view>
				<view class='lineVal dFlex jBetween_aCenter'>
					<view class='iptBox'>
						<input type="number" v-model="code" placeholder="请输入验证码">
					</view>
					<text class='code' @tap='getCode'>{{codeFlag?"获取验证码":showTxt+"s后重发"}}</text>
				</view>
			</view>
		</view>
		<view class='redBtn' @tap='bindPhone'>立即绑定</view>
	</view>
</template>

<script>
	let timer = null;
	export default {
		data() {
			return {
				tel:'',
				code:'',
				codeFlag:true,
				showTxt:60,
			};
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			// 绑定手机号
			bindPhone(){
				if(!this.code){
					uni.showToast({
						title:'验证码不能为空',
						icon:'none'
					})
					return;
				}
			},
			// 获取验证码
			getCode(){
				if(this.codeFlag){
					this.tool.getData("sendtel/send_to_id",{
						memberId:uni.getStorageSync('user').memberId?uni.getStorageSync('user').memberId:'',
						code:uni.getStorageSync('user').code?uni.getStorageSync('user').code:"",
					}).then(res=>{
						console.log(res);
						if(res){
							this.codeFlag = false;
							timer = setInterval(()=>{
								this.showTxt -- ;
								if(time>0){
									
								}else{
									this.showTxt = 60;
									this.codeFlag = true;
									clearInterval(timer);
								}
							},1000)
						}
					}).catch(err=>{
						console.log(err);
					})
				}else{ 
					uni.showToast({
						title:'请不要频繁操作',
						icon:"none"
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.bindPhone{
		width: 100%;
		height: 100%;
		background: white;
		padding: 15% 10% 0;
		box-sizing: border-box;
		.redBtn{
			width: 100%;
			text-align: center;
			color: white;
			border-radius: 4px;
			padding: 10px 0;
			background: linear-gradient(0deg,#609ff8 0%, #1664ff 100%);
		}
		.forms{
			width: 100%;
			margin-bottom: 60upx;
			.formLine{
				width: 100%;
				margin-bottom: 40upx;
				background: #e6e6e6;
				padding:22upx 26upx;
				box-sizing: border-box; 
				border-radius: 8upx;
				.lineTitle{
					width: 25%;
					margin-right: 15upx; 
				}
				.lineVal{
					flex: 1;
					.iptBox{
						flex: 1;
						margin-right:20upx;
					}
					.code{
						width: auto;
						color: #1664FF;
					}
				}
			}
		}
		.titles{
			width: 100%;
			margin-bottom:100upx;
			.titleOne{
				font-size: 24px;
			}
			.titleTwo{
				color: #999999;
				font-size: 15px;
				margin-top: 20upx;
			}
		}
	}
</style>
